<template>
	<view class="page-warp">

		<view class="top-warp">
			<Search :showIcon="false" v-model="initQueryParams.query" @onConfirm="onConfirm"></Search>
			<u-tabs :list="NavList" :is-scroll="false" :current="navCurrentIndex" @change="changeNav"></u-tabs>
		</view>

		<view class="center-warp">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<CallRecords v-for="item in data" :data="item" :code="initQueryParams.temp" :key="item.id"></CallRecords>
			</mescroll-uni>
		</view>


	</view>
</template>


<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import CallRecords from '@/pagesCallRecords/components/callRecords.vue'
	import { getRedData, getPageList } from '@/apis/callRecords.js'
	import Search from '@/components/input/index.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin

		components: {
			CallRecords,
			Search
		},
		computed: {
			NavList() {
				return [{
					name: '已接',
					count: this.redNum.pickedUp,
					temp: 'pickedUp'
				}, {
					name: '未接',
					count: this.redNum.missed,
					temp: 'missed'
				}]
			}
		},
		data() {
			return {
				navCurrentIndex: 0,
				data: [],
				redNum: {
					pickedUp: 0,
					missed: 0
				},
				initQueryParams: {
					query: '',
					temp: 'pickedUp',
					pageNum: 0,
					pageSize: 10
				}
			}
		},
		onLoad() {
			this.initRedData()
		},
		methods: {

			async initRedData(query = '') {
				let res = await getRedData({
					query
				})
				let vals = res.body
				this.$set(this.redNum, 'pickedUp', vals.pickedUp)
				this.$set(this.redNum, 'missed', vals.missed)
			},
			onConfirm(value) {
				this.initQueryParams.query = value
				this.data = []
				this.initRedData(value)
				this.mescroll.resetUpScroll() // 再刷新列表数据

			},
			changeNav(index) {
				this.navCurrentIndex = index
				const { code, temp } = this.NavList[index]
				this.$set(this.initQueryParams, 'temp', temp)
				this.data = []
				this.initRedData(this.initQueryParams.query)
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			upCallback(page) {
				console.log(page, 'page');
				this.initQueryParams.pageSize = page.size;
				this.initQueryParams.pageNum = page.num
				getPageList(this.initQueryParams).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					if (page.num == 1) this.data = []; //如果是第一页需手动制空列表
					if (res.code === 0) {
						let list = res.body.list || []
						this.mescroll.endByPage(list.length, res.body.total)
						if (list.length) {
							this.data = [...this.data, ...list]
						}
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

		}
	}
</script>


<style lang="scss">
	/*根元素需要有固定的高度*/
	page {
		height: 100%;


		/*需给父元素设置height:100%*/
		.page-warp {
			height: 100%;
			display: flex;
			flex-direction: column;

			/* 顶部区域 */
			.top-warp {
				// padding: 20rpx; 
			}

			/* 中间 */
			.center-warp {
				padding: 0 30rpx;
				flex: 1;
				min-width: 0;
				min-height: 0;
				margin-bottom: 60rpx;
			}


		}
	}
</style>
